<script setup lang="ts">
import { useNotify } from 'nutui-uniapp/composables'
import { onMounted, reactive, ref } from 'vue'
import fakeData from './data'

// 定义页面
definePage({
  style: {
    navigationStyle: 'default',
    navigationBarTitleText: '商品详情',
  },
})

const notify = useNotify()

// 状态参数
const state = reactive({
  currentPage: 0,
  swiperPage: 0,
  isShowSku: false,
})

// sku数据
const skuList = ref<any[]>([])
const skuGoods = ref<any>()

// 虚拟评价
const cmt = ref()

// 幻灯数据
const swiperList = ref<{ link?: string, img: string }[]>([
  {
    img: '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg',
  },
  {
    img: '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg',
  },
])
function handleclick(info: any) {
  underConstruction()
  window.console.log('进行跳转', info)
}
function clickImages(imgs: any) {
  underConstruction()
  window.console.log('进行图片展示', imgs)
}
// 切换规格类目
function selectSku(ss: any) {
  const { sku, _skuIndex, _parentSku, parentIndex } = ss
  if (sku.disable)
    return false
  skuList.value[parentIndex].list.forEach((s: any) => {
    s.active = s.id === sku.id
  })
  skuGoods.value = {
    skuId: sku.id,
    price: '4599.00',
    imagePath:
        '//img14.360buyimg.com/n4/jfs/t1/215845/12/3788/221990/618a5c4dEc71cb4c7/7bd6eb8d17830991.jpg',
  }
}
// 底部操作按钮触发
function clickBtnOperate(op: any) {
  underConstruction()
  window.console.log('点击了操作按钮', op)
  state.isShowSku = false
}
// 开启sku
function openSku() {
  state.isShowSku = true
}

// 未实装提示
function underConstruction() {
  notify.warning('本功能未实装，可自行实现')
}

onMounted(() => {
  cmt.value = fakeData.comment
  skuList.value = fakeData.sku
  skuGoods.value = fakeData.goods
})
</script>

<template>
  <view>
    <nut-notify />
    <nut-swiper
      :init-page="state.swiperPage"
      :pagination-visible="true"
      auto-play="5000"
      @change="(index: number) => (state.currentPage = index + 1)"
    >
      <nut-swiper-item v-for="(item, index) of swiperList" :key="index">
        <img :src="item.img" alt="">
      </nut-swiper-item>
      <template #page>
        <div class="page">
          {{ state.currentPage }} / {{ swiperList.length }}
        </div>
      </template>
    </nut-swiper>
    <view class="information">
      <nut-cell>
        <view class="board">
          <nut-price :price="8499" size="large" thousands />
          <view class="title">
            <nut-tag type="danger">
              自营
            </nut-tag>
            【活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只
            鲜活生鲜螃蟹现货水产礼盒海鲜水
          </view>
        </view>
      </nut-cell>
      <nut-cell-group>
        <nut-cell title="选择规格" is-link @click="openSku" />
      </nut-cell-group>
      <nut-cell>商品详情略</nut-cell>
      <nut-cell v-if="cmt">
        <nut-comment
          header-type="complex"
          images-rows="multi"
          :images="cmt.images"
          :videos="cmt.videos"
          :info="cmt.info"
          :follow="cmt.follow"
          ellipsis="6"
          :operation="['replay']"
          @click="handleclick"
          @click-images="clickImages"
        >
          <template #commentLabels>
            <image
              style="height: 15px; width: 50px"
              src="https://img11.360buyimg.com/imagetools/jfs/t1/211858/17/4258/12101/618e6f78Ed0edcadc/e83a673555edf59f.jpg"
            />
          </template>
        </nut-comment>
      </nut-cell>
    </view>
    <view h-55px />
    <view class="footer">
      <view class="action" @click="underConstruction">
        <nut-icon name="service" size="16" />
      </view>
      <view class="action">
        <nut-badge :value="8" @click="underConstruction">
          <nut-icon name="cart" size="16" />
        </nut-badge>
      </view>
      <view class="btn">
        <nut-button type="warning" @click="openSku">
          加购物车
        </nut-button>
        <nut-button type="primary" @click="openSku">
          立即购买
        </nut-button>
      </view>
    </view>
    <nut-sku
      v-if="skuList && skuGoods"
      v-model:visible="state.isShowSku"
      :sku="skuList"
      :goods="skuGoods"
      @select-sku="selectSku"
      @click-btn-operate="clickBtnOperate"
    />
  </view>
</template>

<style lang="scss" scoped>
  .nut-swiper-item {
    line-height: 600rpx;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .information {
    padding: 0 20rpx 20rpx;
    .board {
      .title {
        color: #000;
        margin-top: 10rpx;
        font-size: 28rpx;
        line-height: 1.7;
      }
    }
    .comment {
      width: 100%;
    }
  }
  .footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 15rpx 20rpx;
    display: flex;
    align-items: center;
    border-top: 1px solid #eee;
    background-color: #fff;
    border-top-left-radius: 10rpx;
    border-top-right-radius: 10rpx;
    .action {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 80rpx;
      line-height: 100%;
    }
    .btn {
      display: flex;
      align-items: center;
      justify-content: end;
      flex-wrap: wrap;
      gap: 15;
      flex: 1;
      .nut-button {
        padding: 0 60rpx;
        margin-left: 20rpx;
      }
    }
  }
  .page {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 46px;
    height: 22px;
    background: rgba(0, 0, 0, 0.33);
    border-radius: 22px;
    text-align: center;
    color: #fff;
    font-size: 14px;
  }
</style>
